<template>
	<view style="display: flex;width: 100%;">
		<view style="padding: 6px;" @click="handlePlay">
			<loadingVue v-if="loading" :size="fontSize" />
			<uni-icons v-if="!playing && !loading" custom-prefix="iconfont" type="icon-playfill" :size="fontSize" />
			<uni-icons v-else-if="playing && !loading" custom-prefix="iconfont" type="icon-pause" :size="fontSize" />
		</view>
		<progress :percent="30" style="flex: 1; margin: 10px;"></progress>
	</view>
</template>

<script setup>
	import loadingVue from '../loading.vue';
	export default {
		name: "music",
		components: {
			loadingVue
		},
		data() {
			return {
				loading: false,
				playing: false,
				fontSize: 30,
				music: {
					"artist": "专辑-108个关键词",
					"artistId": "6722372454ea7803b905f3f3",
					"name": "倒影",
					"url": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@main/audio/108个关键词/倒影.mp3",
					"lyric": []
				},
				audioMnger: null,
			};
		},
		mounted() {
			const audioMnger = uni.createInnerAudioContext();
			console.log(audioMnger);
			audioMnger.title = this.music.name;
			audioMnger.src = this.music.url;
			audioMnger.singer = this.music.singer || 'lizhi';
			audioMnger.play()
		},
		methods: {
			handlePlay() {
				this.loading = true
				setTimeout(() => {
					this.loading = false
					this.playing = !this.playing
				}, 3000)
			}
		}
	}
</script>

<style lang="scss">

</style>